<template>
	<a-menu
		mode="horizontal"
		:openKeys="defaultExpands"
		v-model:selectedKeys="selectedKeys"
		@click="handleMenuClick"
		:class="`control-content app-control-menu__content no-padding app-control-menu__content--${theme}`"
	>
		<template v-for="item in menus" :key="item.name">
			<AppMenuitem :item="item"></AppMenuitem>
		</template>
	</a-menu>
</template>

<script lang="ts" setup>
import AppMenuitem from './menu-item.vue';
import { MenuProps } from '../menu';
import { IProjectSetting } from '@/core';
const props = defineProps(MenuProps);
const emit = defineEmits(['menuClick']);
const selectedKeys = ref<string[]>([]);
const handleMenuClick = ({ key }: any): void => {
	emit('menuClick', key);
};
const projectSetting: IProjectSetting = App.getProjectSetting();
const theme = projectSetting.menuSetting.theme.toLowerCase();
watch(
	() => props.selections,
	() => {
		selectedKeys.value = props.selections;
	},
	{ immediate: true }
);
</script>
